<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 1200px;
        }
    </style>
</head>
<body>
<script>
    class TopsScrollTools {
        constructor(options) {
            this.defaultOptions = {
                color: '#1159e3',
                height: 5
            }
            this.mergeOptions(this.defaultOptions, options);
            this.init();
            this.bindEvents();
        }

        init() {
            this.oDiv = document.createElement('div');
            this.oDiv.id = 'topDiv';
            this.oDiv.style.cssText = `width: 0%;height: ${this.defaultOptions.height}px;background: ${this.defaultOptions.color};position: fixed;top: 0;left: 0`;
            document.body.append(this.oDiv);
            this.clientHeight = document.documentElement.clientHeight || window.innerHeight;
            this.scrollHeight = document.documentElement.scrollHeight ||
                document.body.scrollHeight;
        }

        bindEvents() {
            window.addEventListener('scroll', this.run.bind(this), false);
        }

        run() {
            let scrollTop = window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            if (this.scrollHeight - this.clientHeight !== 0) {
                this.oDiv.style.width = (scrollTop / (this.scrollHeight - this.clientHeight) * 100) + '%'
            } else {
                this.oDiv.style.width = 0 + '%';
            }
        }

        mergeOptions(defaultOptions, options) {
            this.defaultOptions = Object.assign(defaultOptions, options);
        }
    }

    new TopsScrollTools({
        color: 'rgba(217,20,197,0.8)',
        height: 4
    });
</script>
</body>

</html>